<template>
  <el-dialog title="更换手机号" v-model="visible" width="415px" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" >
    <el-form class="form" ref="formRef" :model="form" :show-message="false">
      <el-form-item prop="loginPhone" label="新手机号：" :label-width="95" :rules="{ required: true, validator: validatePhone, trigger: 'blur' }">
        <el-input class="third_input" v-model="form.loginPhone"></el-input>
      </el-form-item>
      <el-form-item prop="captcha" label="短信验证：" required>
        <div class="captcha">
          <el-input v-model="form.captcha" autocomplete="off"></el-input>
          <Button label="获取验证码" class="captcha-btn" @click="onGetCodeClick" />
        </div>
      </el-form-item>
      <el-form-item class="btns">
        <Button class="is-plain" label="取消" @click="onCancelClick" />
        <Button type="primary" label="确认" @click="onSubmitClick" />
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { computed, reactive, ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import formater from '@/formater'
import Button from '@/components/button/button.vue'
import api from '@/api'

const emit = defineEmits(['update:visible', 'complete'])
const props = defineProps(['visible'])

const formRef = ref(null)

const form = reactive({
  loginPhone: '',
  captcha: ''
})

const validatePhone = (rule, value, callback) => {
  const reg = /^1[3456789]\d{9}$/
  if (!value || !reg.test(value)) {
    callback(new Error())
  } else {
    callback()
  }
}



const visible = computed({
  get: () => {
    return props.visible
  },
  set: (value) => emit('update:visible', value)
})

const hide = () => {
  visible.value = false
  nextTick(() => {
    formRef.value.clearValidate()
    formRef.value.resetFields()
  })
}

const updateLoginAccount = async () => {
  let { err } = await api.post(`/medinstrument/third/supplier/updateLoginAccount?captcha=${form.captcha}&loginPhone=${form.loginPhone}`)
  if (err) {
    ElMessage.error(err)
  } else {
    ElMessage.success('登录账号更换成功')
    emit('complete')
    hide()
  }
}

const send = async () => {
  let params = { mobile: form.loginPhone, smsType: 'CHANGE_PHONE' }
  let { err } = await api.post('/medinstrument/third/sms/sendMessage', params)
  if (err) {
    ElMessage.error(err)
  } else {
    ElMessage.success('短信发送成功')
  }
}

const onGetCodeClick = () => {
  send()
}

const onCancelClick = () => {
  hide()
}

const onSubmitClick = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      updateLoginAccount()
    }
  })
}
</script>

<style scoped lang="scss">
.form {
  .captcha {
    width: 100%;
    display: flex;
    align-items: center;
    .el-input {
      height: 40px;
    }

    .captcha-btn {
      height: 40px;
      color: var(--color-primary);
      border-color: var(--color-primary);
      background-color: #fff;
      cursor: pointer;
      margin-left: 10px;
    }
  }

  .btns {
    margin-left: 95px;
  }
}
</style>
